<template>
  <el-dialog @close="closeDialog" title="添加管理员" :visible.sync="visible" width="500px">
    <div class="form-container">
      <el-form style="width: 400px" :model="form" :rules="rules" class="login-form" label-width="80px" ref="form">
        <el-form-item label="账号：" prop="aname">
          <el-input placeholder="账号" size="medium" prefix-icon="el-icon-user"
                    v-model="form.aname"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="apassword">
          <el-input placeholder="密码" size="medium" prefix-icon="el-icon-lock" show-password
                    v-model="form.apassword"></el-input>
        </el-form-item>
        <div style="text-align: center;margin-top: 40px">
          <el-button style="width: 120px;" type="success" plain size="medium" autocomplete="off"
                     @click="doAddAdmin">确认添加
          </el-button>
          <el-button style="width: 120px;" type="primary" plain size="medium" autocomplete="off"
                     @click="visible=false">取消
          </el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddAdmin",
  data() {
    return {
      visible: false,
      form: {
        aname: '',
        apassword: ''
      },
      rules: {
        aname: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        apassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ]
      }

    }
  },
  methods: {
    doAddAdmin() {
      let promise = this.$refs.form.validate();
      // 若验证表单通过
      promise.then(() => {
        this.request.post("/Administrator/addAdmin", this.form).then(res => {
          if (!res) {
            this.$message.error("已有重复账户，添加失败！");
          } else {
            this.$message.success("添加成功！");
            this.visible = false;
          }
        })
      }).catch(() => {

      });
    },
    closeDialog() {
      this.$refs.form.resetFields();
    }
  }
}
</script>

<style scoped>
.form-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
</style>